<template>
  <div class="measurePage">

    <pageLoading v-if="page.loading" :size="600"></pageLoading>

      <div class="measure-main" v-if="!page.loading">

      <div class="measure-main-form MT-20">

        <div class="cent">
          <div class="measure_body_value">
            <p>1、净体数据</p>
            <template v-for="(item,index) in formItem">
              <div class="item-tab tab-input item-tab-fl" :class="{'tab-input-fail':!formItem[index].pass}">
                <span>{{item.item}}</span>
                <div class="case">
                  <reduceBox :pass="formItem[index].pass" @change="reduceboxChange(index,'val')" ref="val"></reduceBox>
                </div>
              </div>
            </template>
          </div>
          <div class="measure_to_value">
          </div>
          <div class="measure_param_value">
            <p>2、成衣数据</p>
            <template v-for="(item,index) in formItem">
              <div class="item-tab tab-input item-tab-fl">
                <span>{{item.item}}</span>
                <reduceBox :pass="formItem[index].pass" @change="reduceboxChange(index,'val1')" ref="val1"></reduceBox>
              </div>
            </template>
          </div>
          <div class="measure_zoom_value">
            <p>3、净体数据规定范围</p>

            <template v-for="item in formItem">
              <a id="param_26_desc">
                范围: {{item.min}} - {{item.max}}
              </a>
            </template>
          </div>
        </div>

      </div>

      <bottomBtn @prev="pagePrev" @next="pageNext">

      </bottomBtn>

      <Modal
        v-model="modal.state"
        title="提示"
        :mask-closable="false"
        :closable="false"
        @on-ok="asyncOK">
        <h2>
          是否确认选择该数据？
        </h2>
      </Modal>

    </div>

  </div>
</template>

<script>
  import {mapMutations, mapState} from 'vuex';
  import {getMeasure} from "api/getMeasure";
  import {isSame} from "common/js/utils";
  import bottomBtn from "base/bottomBtn.vue";
  import pageLoading from "base/pageLoading";
  import selectBox from "base/selectbox";
  import reduceBox from "base/reduceBox"

  export default {
    props: {},
    data() {
      return {
        page: {
          loading: true,
        },
        formItem: [],
        modal: {
          state: false
        }
      }
    },
    methods: {
      ...mapMutations({
        "setNavIndex": 'SET_NAVINDEX',
        "setMeasureData": "SET_MEASUREDATA"
      }),
      pagePrev() {
        this.setNavIndex(this.navIndex - 1);
      },
      pageNext() {
        this._vaildForm()?this.modal.state = true:this.$Notice.info({title: '错误', desc:'表单未通过'});
      },
      asyncOK() {
        this.setMeasureData(this._normalizeForm());
        this.setNavIndex(this.navIndex + 1);
      },
      reduceboxChange(index, name) {
        //实例分别向数据赋值
        this.formItem[index][name] = this.$refs[name][index].data;
        //联动 val1
        this._linkage(index,name);
        this._vaildForm();
      },
      _getList() {
        if (!this.type) {
          return
        }
        this.page.loading = true;
        getMeasure({
          id: this.type,
          goods: this.goodsId,
          lining: this.liningId,
          stereotype: this.stereotype,
          designData: this.designData
        }).then((Rs) => {
          this.page.loading = false;
          this.formItem = Rs.data;
        }).catch((error) => {
          this.setNavIndex(1);
        })
      },
      _jugeData() {
        if (this.designData === "") {
          this.pagePrev();
        }
      },
      _vaildForm() {
        let juge = true;
        this.formItem.forEach((item, index) => {
          // 根据原数据验证表单
          let {max,min} = item, count = +item.val;
           juge = item.pass = count >= +min && count <= +max;
        });
        return juge;
      },
      _normalizeForm(){
        let data = {};
        this.$data.formItem.forEach((item,index)=>{
          data[item.id] = [+item.val,+item.val1,item.item];
        });
        return data
      },
      _linkage(index,name){
        //特例方法 用于联动 val1
        if(name === 'val'){
          this.$refs.val1[index].$data.data = +this.formItem[index].val + +this.formItem[index].relax
        }
      }
    },
    components: {
      bottomBtn,
      pageLoading,
      selectBox,
      reduceBox
    },
    computed: {
      ...mapState([
        'type',
        'goodsId',
        'navIndex',
        'liningId',
        "stereotype",
        'designData'
      ])
    },
    mounted() {

    },
    updated() {

    },
    created() {
      this._getList();
    },
    activated() {
      this._vaildForm()
    },
    deactivated() {

    },
    watch: {
      designData(newValue, oldval) {
        // 不相等获得数据
        !isSame(newValue, oldval) ? this._getList() : null;
      }
    }
  }
</script>

<style lang="less">
  @import "../../common/style/helpers/mixins.less";

  .measurePage {

    .measure-main-form {
      margin-top: 20px;
    }
    .tab-input-fail {
      .body_26 {
        border-color: #9e2828 !important;
      }
    }
    .cent {
      width: 100%;
      margin: 0px auto;
      min-height: 200px;
      overflow: hidden;
      position: relative;
      background: transparent url("") no-repeat scroll center top / 100% 50px;
    }
    .cent p {
      width: 100%;
      border: 1px solid rgb(233, 231, 232);
      color: rgb(142, 59, 45);
      text-align: center;
      line-height: 48px;
      font-size: 16px;
    }
    .cent .item-tab {
      overflow: hidden;
    }
    .measure_body_value {
      width: 20%;
      float: left;
      border: 1px solid rgb(238, 238, 238);
      min-width: 160px;
    }
    .measure_to_value {
      width: 40px;
      height: 48px;
      margin-left: 1%;
      text-align: center;
      font-size: 40px;
      cursor: pointer;
      position: absolute;
      top:50%;
      left: 220px;
      margin-top: -24px;

      background: transparent url("") no-repeat scroll center center;
    }
    .measure_param_value {
      width: 25%;
      float: left;
      margin: 0px 2% 0px 1%;
      border: 1px solid rgb(238, 238, 238);
      min-width: 194px;
      margin-left: 50px;
    }
    .measure_zoom_value {
      width: 46%;
      float: left;
      border: 1px solid rgb(238, 238, 238);
      min-width: 240px;
    }
    .measure_zoom_value a {
      width: 100%;
      display: block;
      height: 53px;
      line-height: 53px;
      border-bottom: 1px solid rgb(238, 238, 238);
      padding: 6px 0px 6px 10px;
    }
    em {
      display: block;
      height: 40px;
      width: 26px;
      float: left;
      color: rgb(122, 121, 121);
      text-align: center;
      cursor: pointer;
      font-size: 16px;
      padding-top: 3px;
    }
    em.add {
      float: left;
    }
    .cent .item-tab-fl {
      width: 100%;
      padding: 6px 0px;
      border-bottom: 1px solid rgb(238, 238, 238);

    }
    .item-tab .case input[type="number"] {
      height: 40px;
      line-height: normal;
      width: 150px;
      border: 1px solid rgb(238, 238, 238);
      background: rgb(247, 247, 247) none repeat scroll 0% 0%;
      text-align: left;
      padding-left: 10px;

    }
    .cent .item-tab > span {
      top: 12px;
      left: 20px;
      width: 40px;
    }
    .cent .case {
      float: right;
      margin-right: 20px;
    }
    .cent .measure_param_value .case {
      margin-right: 10px;
    }
    .cent .item-tab .casebtn {
      float: none;
    }
    .cent {
      .tab-input {
        line-height: 30px;
        span {
          position: relative;
          top: 5px;
        }
      }
    }
    .cent .measure_zoom_value {
      a {
        position: relative;
        line-height: 40px;
        color: #333;
      }
    }
  }

</style>
